<template>
  <div>
    <div class="taskCreate" v-if="showCreate">
      <van-form>
        <van-field
          v-model="show.beginTime_plan"
          label="开始时间"
          placeholder="请选择"
          input-align="right"
          :rules="[{ required: true, message: '请确定计划时间' }]"
          readonly
          @click="onclickBeginTimePlan"
        />
        <van-field
          v-model="show.endTime_plan"
          label="结束时间"
          placeholder="请选择"
          input-align="right"
          readonly
          :rules="[{ required: true, message: '请确定计划时间' }]"
          @click="onclickEndTimePlan"
        />
        <van-field
          v-model="show.workArea"
          label="施工地点"
          placeholder="请选择"
          input-align="right"
          readonly
          @click="onclickWorkArea"
        />
        <van-field v-model="taskInfo.workContent" label="施工内容" type="textarea" />
        <van-field
          v-model="show.fence"
          label="电子围栏"
          placeholder="请设定"
          input-align="right"
          readonly
          @click="onclickFence"
        />
        <van-field
          v-model="managerShow"
          label="负责人"
          placeholder="请选择"
          input-align="right"
          readonly
          @click="onclickManager"
        />
        <van-field
          v-model="liaisonShow"
          label="联络员"
          placeholder="请选择"
          input-align="right"
          readonly
          @click="onclickLiaison"
        />
        <van-field
          v-model="safemanShow"
          label="防护员"
          placeholder="请选择"
          input-align="right"
          readonly
          @click="onclickSafeman"
        />
        <van-field
          v-model="workerShow"
          label="施工人员"
          placeholder="请选择"
          input-align="right"
          readonly
          @click="onclickWorker"
        />
        <van-field v-model="taskInfo.comments" type="textarea" autosize label="备注" />
        <van-popup v-model="showDateTimePicker" round position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择日期时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmDTP"
            @cancel="onCancelDTP"
          />
        </van-popup>
        <van-popup v-model="showWorkAreaPicker" round position="bottom" :style="{ height: '50%' }">
          <van-dropdown-menu>
            <van-dropdown-item
              v-model="workAreaPicker.dropdown1.select"
              :options="workAreaPicker.dropdown1.options"
              @change="onDropdown1Change"
            />
            <van-dropdown-item
              v-if="showDropdown2"
              v-model="workAreaPicker.dropdown2.select"
              :options="workAreaPicker.dropdown2.options"
              @change="onDropdown2Change"
            />
            <van-dropdown-item
              v-if="showDropdown3"
              v-model="workAreaPicker.dropdown3.select"
              :options="workAreaPicker.dropdown3.options"
              @change="onDropdown3Change"
              disabled
            />
          </van-dropdown-menu>
          <div class="workArea">
            <van-form>
              <van-row>
                <van-col span="14">
                  <van-field
                    v-model="taskInfo.workAreaKM.start.kilo"
                    name="a"
                    class="kilo"
                    label="开始 公里(K)"
                    placeholder="请填写"
                  />
                </van-col>
                <van-col span="10">
                  <van-field
                    v-model="taskInfo.workAreaKM.start.meter"
                    name="b"
                    class="meter"
                    label="米(M)"
                    placeholder="请填写"
                  />
                </van-col>
              </van-row>
              <van-row>
                <van-col span="14">
                  <van-field
                    v-model="taskInfo.workAreaKM.end.kilo"
                    name="c"
                    class="kilo"
                    label="结束 公里(K)"
                    placeholder="请填写"
                  />
                </van-col>
                <van-col span="10">
                  <van-field
                    v-model="taskInfo.workAreaKM.end.meter"
                    name="d"
                    class="meter"
                    label="米(M)"
                    placeholder="请填写"
                  />
                </van-col>
              </van-row>
              <van-field
                v-model="taskInfo.workAreaKM.comments"
                label="补充内容"
                name="comments"
                type="textarea"
                autosize
                placeholder="请填写"
              />
              <div class="submit-area">
                <van-button round style="width:120px;" @click="onCancelWorkArea">取消</van-button>
                <van-button round type="info" style="width:120px;" @click="onConfirmWorkarea">确定</van-button>
              </div>
            </van-form>
          </div>
        </van-popup>
        <div class="submit-area">
          <van-button round style="width:120px;" @click="onCancelTaskCreate">取消</van-button>
          <van-button round type="info" style="width:120px;" @click="onSubmitTaskCreate">创建</van-button>
        </div>
      </van-form>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { getFormatDate, getFormatHourMinute, getFormatDateTime } from '../../utils/datetime'
import { mapGetters, createNamespacedHelpers } from 'vuex'
const taskCreateStore = createNamespacedHelpers('taskCreate')
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      taskInfo: {
        beginTime_plan: 0,
        endTime_plan: 0,
        workAreaKM: {
          start: { kilo: '', meter: '' },
          end: { kilo: '', meter: '' },
          comments: ''
        },
        workContent: '',
        comments: ''
      },
      show: {
        beginTime_plan: '',
        endTime_plan: '',
        workArea: '',
        fence: ''
      },
      showDateTimePicker: false,
      showWorkAreaPicker: false,
      curShow: '',
      minDate: new Date(2022, 1, 1),
      maxDate: new Date(2025, 12, 31),
      currentDate: new Date(),
      showDropdown2: false,
      showDropdown3: false,
      workAreaPicker: {
        dropdown1: {
          select: 0,
          options: [
            { text: '请选择车站区间', value: 0 },
            { text: '站内', value: 1 },
            { text: '区间', value: 2 }
          ]
        },
        dropdown2: { select: 0, options: [{ text: '请选择', value: 0 }] },
        dropdown3: { select: 0, options: [{ text: '请选择', value: 0 }] }
      },
      stationOptions: [
        { text: '选择车站', value: 0 },
        { text: '七矿站', value: 10 },
        { text: '中心站', value: 11 },
        { text: '申西站', value: 12 },
        { text: '田庄站', value: 13 },
        { text: '八矿站', value: 14 }
      ],
      sectionOptions: [
        { text: '选择区间', value: 0 },
        { text: '七矿站~中心站', value: 1 },
        { text: '中心站~申西站', value: 2 },
        { text: '申西站~田庄站', value: 3 },
        { text: '田庄站~八矿站', value: 4 }
      ],
      directionOptions: [
        { text: '选择上下行', value: 0 },
        { text: '上行', value: 1 },
        { text: '下行', value: 2 }
      ]
    }
  },
  computed: {
    ...mapGetters(['userId', 'deviceId']),
    ...taskCreateStore.mapGetters(['showCreate', 'manager', 'liaison', 'safeman', 'worker', 'managerShow', 'liaisonShow', 'safemanShow', 'workerShow'])
  },
  watch: {},
  created() {},
  mounted() {
    this.fillTaskCreateData()
  },
  methods: {
    ...taskCreateStore.mapMutations(['setShowCreate']),
    jumpToMemberSelect(selectType, chosenItems) {
      this.setShowCreate(false)
      this.$router.push({ path: '/memberSelect', query: { selectType, chosenItems } })
    },
    fillTaskCreateData() {
      this.taskInfo.type = 1
      this.fillShowData(this.taskInfo)
    },
    fillShowData(taskInfo) {
      // workArea Show
      this.show.workArea = this.generateWorkareaShow()
    },
    onclickBeginTimePlan() {
      this.showDateTimePicker = true
      this.curShow = 'beginTimePlanPicker'
    },
    onclickEndTimePlan() {
      this.showDateTimePicker = true
      this.curShow = 'endTimePlanPicker'
    },
    onclickManager() {
      this.jumpToMemberSelect('manager', this.manager)
    },
    onclickLiaison() {
      this.jumpToMemberSelect('liaison', this.liaison)
    },
    onclickFence() {},
    onclickSafeman() {
      this.jumpToMemberSelect('safeman', this.safeman)
    },
    onclickWorker() {
      this.jumpToMemberSelect('worker', this.worker)
    },
    onclickWorkArea() {
      this.showWorkAreaPicker = true
    },
    onConfirmDTP(dateTime) {
      if (this.curShow === 'beginTimePlanPicker') {
        this.taskInfo.beginTime_plan = dateTime
        this.show.beginTime_plan = getFormatDate(dateTime) + ' ' + getFormatHourMinute(dateTime)
      } else if (this.curShow === 'endTimePlanPicker') {
        this.taskInfo.endTime_plan = dateTime
        this.show.endTime_plan = getFormatDate(dateTime) + ' ' + getFormatHourMinute(dateTime)
      }
      this.showDateTimePicker = false
    },
    onCancelDTP() {
      this.showDateTimePicker = false
    },
    onDropdown1Change(val) {
      if (val === 0) {
        this.showDropdown2 = false
        this.showDropdown3 = false
      } else if (val === 1) {
        this.workAreaPicker.dropdown2.select = 0
        this.workAreaPicker.dropdown2.options = this.stationOptions
        this.showDropdown2 = true
        this.showDropdown3 = false
      } else if (val === 2) {
        this.workAreaPicker.dropdown2.select = 0
        this.workAreaPicker.dropdown2.options = this.sectionOptions
        this.showDropdown2 = true
      } else {
      }
    },
    onDropdown2Change(val) {
      if (val !== 0) {
        if (this.workAreaPicker.dropdown1.select === 2) {
          this.workAreaPicker.dropdown3.select = 0
          this.workAreaPicker.dropdown3.options = this.directionOptions
          this.showDropdown3 = true
        }
      }
    },
    onDropdown3Change(val) {},
    generateWorkareaShow() {
      let showStr = ''
      const val1 = this.workAreaPicker.dropdown1.select // 站内、区间
      const val2 = this.workAreaPicker.dropdown2.select // 具体车站或区间
      const options = this.workAreaPicker.dropdown2.options
      if (val1 && val2) {
        const idx = options.findIndex((item) => item.value === val2)
        if (val1 === 1) {
          // 站内
          showStr = `站内：[${options[idx].text}]`
        } else if (val1 === 2) {
          // 区间
          // const rangeStart = this.taskInfo.workAreaKM.start
          // const rangeEnd = this.taskInfo.workAreaKM.end
          // const range = `K${rangeStart.kilo}~${rangeStart.meter} 至 K${rangeEnd.kilo}~${rangeEnd.meter}`
          // showStr = section + range
          showStr = `区间：[${options[idx].text}]`
        } else {
        }
      }
      return showStr
    },
    onConfirmWorkarea() {
      const areaIdx1 = this.workAreaPicker.dropdown1.select // 站内、区间
      const areaIdx2 = this.workAreaPicker.dropdown2.select // 具体车站或区间
      do {
        if (areaIdx1 === 0) {
          console.log('请选择车站区间')
          break
        }
        if (areaIdx2 === 0) {
          if (areaIdx1 === 1) {
            console.log('请选择车站')
          } else if (areaIdx1 === 2) {
            console.log('请选择区间')
          }
          break
        }
        this.show.workArea = this.generateWorkareaShow()
        this.showWorkAreaPicker = false
      } while (0)
    },
    onCancelWorkArea() {
      this.showWorkAreaPicker = false
    },
    async onSubmitTaskCreate() {
      const task = {
        type: 1,
        state: 3,
        creater: { userId: this.userId, deviceId: this.deviceId },
        beginTime_plan: getFormatDateTime(this.taskInfo.beginTime_plan),
        endTime_plan: getFormatDateTime(this.taskInfo.endTime_plan),
        manager: [],
        liaison: [],
        safeman: [],
        fences: [6]
      }
      console.log(this.manager)
      this.manager.forEach((item) => {
        task.manager.push({ userId: item.id })
      })
      this.liaison.forEach((item) => {
        task.liaison.push({ userId: item.id })
      })
      this.safeman.forEach((item) => {
        task.safeman.push({ userId: item.id })
      })
      task.worker = this.getPostTaskWorker()
      const { data } = await this.$http.post('/task/taskCreate', task)
      if (data.code === 0) {
        this.$router.go(-1)
      } else {
        // TODO：弹窗提示
      }
    },
    onCancelTaskCreate() {},
    getPostTaskWorker() {
      const worker = {}
      if (this.worker.type) {
        worker.id = this.worker.id
        if (this.worker.type === 'userId') {
          worker.type = 1
        } else if (this.worker.type === 'deviceId') {
          worker.type = 2
        } else if (this.worker.type === 'userGroup') {
          worker.type = 3
        } else if (this.worker.type === 'devcieGroup') {
          worker.type = 4
        } else {
        }
      }
      return worker
    }
  }
}
</script>

<style lang="less" scoped>
.taskCreate {
  .workArea {
    .van-cell {
      font-size: 30px;
    }
    .van-form {
      .meter {
        /deep/.van-field__label {
          width: 90px;
        }
      }
      .kilo {
        /deep/.van-field__label {
          width: 192px;
        }
      }
    }
  }
  .submit-area {
    margin: 20px 100px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
